<template>
        <div id="permission" class="container-fluid padding">
            <table class="layui-hide" id="permissionToolbarList"  lay-filter="permissionToolbarList"></table>
            <script type="text/html" id="permissionToolbar">
              <div class="layui-btn-container">
                <button class="el-button el-button--success el-button--mini is-round" lay-event="add">新增部门</button>
                <button class="el-button el-button--primary el-button--mini is-round" lay-event="refresh">刷新列表</button>
              </div>
            </script>
            <!--v-pre表示这个代码不需要让vue解析掉-->
            <script type="text/html" id="permissionBar" v-pre>
              <button class="el-button el-button--success el-button--mini is-round" lay-event="assign">分配职位</button>
              <button class="el-button el-button--primary el-button--mini is-round" lay-event="edit">编辑</button>
              <button class="el-button el-button--danger el-button--mini is-round" lay-event="del">删除</button>
            </script>
            <!--隐藏项-->
            <div id="assigned" style="display: none">
                <div style="text-align: center;margin-top:5%;">
                    <el-transfer
                        style="text-align: left; display: inline-block"
                        v-model="assigned"
                        filterable
                        :render-content="renderFunc"
                        :titles="['未分配职位', '已分配职位']"
                        :button-texts="['到左边', '到右边']"
                        :props="{
                          key: 'value',
                          value: 'value'
                        }"
                        @change="handleChange"
                        :data="assignedavailable">
                    </el-transfer>
                </div>
            </div>
            <!--隐藏项-->
            <div id="edit" style="display: none">
                <el-form :model="datas" :rules="rules" ref="datas" label-width="100px" class="padding">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="datas.name"></el-input>
                    </el-form-item>
                    <el-form-item label="规则名称" prop="ruleName">
                        <el-select v-model="datas.ruleName" placeholder="请选择活动区域">
                            <el-option v-for="(item,index) in ruleNameOption" :key="index" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input v-model="datas.description"></el-input>
                    </el-form-item>
                    <el-form-item label="数据" prop="data">
                        <el-input v-model="datas.data"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('datas')">保存</el-button>
                        <el-button @click="resetForm('datas')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
</template>
<script>
    import {formatDateTime} from '../../../../common/js/util';
    export default {
        name: "permission",
        data() {
            return {
                renderFunc(h, option) {
                    return  <span > {option['label']} < /span>;
                },
                table_head: [
                    {field: 'name', title: '名称', sort: true, totalRowText: '总条数'}
                    , {field: 'ruleName', title: '规则名称', sort: true}
                    , {field: 'description', title: '描述', sort: true}
                    , {
                        field: 'createdAt', title: '创建时间', sort: true, templet: function (res) {
                            return formatDateTime(res.createdAt);
                        }
                    }
                    , {
                        field: 'updatedAt', title: '更新时间', sort: true, templet: function (res) {
                            return formatDateTime(res.updatedAt);
                        }
                    }
                    , {fixed: 'right', width: 285, align: 'center', templet: '#permissionBar'}
                ],
                datas: {
                    name: "",
                    ruleName: "",
                    description: "",
                    data: "",
                },//编辑的数据字段
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    description: [],
                    data: [],
                },
                index:"",
                totalCount:"",
                ruleNameOption:{},
                selectedAvailable: [],
                available:[],
                selectedAssigned: [],
                assigned:[],
                assignedavailable:[],
            }
        },
        created:function(){
            this.$nextTick(function () {
                this.$message_.postTips(this,"",'qx-rule/list',{},null,(r)=>{
                    this.ruleNameOption = r.data.data;
                })
                $(".el-transfer").css("width","100%");
                $(".el-transfer-panel").css("width","40%");
                layui.use('table', () => {//加这个是防止刷新的时候会出现不存在render方法
                    this.$message_.layTable(this,'qx-permission/list','#permissionToolbarList',{},this.table_head,600,'#permissionToolbar');
                    //头工具栏事件
                    layui.table.on('toolbar(permissionToolbarList)', (obj) => {
                        switch(obj.event){
                            case 'add'://新增数据
                                allType = "add";
                                this.datas = {
                                    name:"",
                                    ruleName:"",
                                    description:"",
                                    data:"",
                                },
                                this.alertEdit();
                                break;
                            case "refresh":
                                noCheckCache = true;
                                this.$message_.layTable(this,'qx-permission/list','#permissionToolbarList',{},this.table_head,600,'#permissionToolbar');
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(permissionToolbarList)', (obj) => {
                        allId = obj.data.name;
                        switch (obj.event){
                            case "del":
                                allType = "del";
                                layer.confirm('真的删除该行么', (index) => {
                                    this.$message_.postTips(this,'删除','qx-permission/delete?id='+allId,{},null,()=>{obj.del();})
                                    layer.close(index);
                                });
                                break;
                            case "assign":
                                allType = "assign";
                                this.alertAssign(obj.data);
                                this.$message_.postTips(this,'','qx-permission/view?id='+allId,{},(response)=>{
                                    if (response.data.res == 1) {//成功
                                        var assignedavailable = []
                                        var assigned = []
                                        var assigned_ = Object.keys(response.data.data.assigned)
                                        var available_ = Object.keys(response.data.data.available)
                                        for(let i in assigned_) {
                                            assignedavailable.push({value:assigned_[i],label:response.data.data.assigned[assigned_[i]]});
                                            assigned.push(assigned_[i]);
                                        }
                                        for(let i in available_) {
                                            assignedavailable.push({value:available_[i],label:response.data.data.available[available_[i]]})
                                        }
                                        this.assignedavailable = assignedavailable
                                        this.assigned = assigned
                                        this.$forceUpdate()
                                    }
                                },()=>{obj.del();})
                                break;
                            case "edit":
                                allType = "edit";
                                this.alertEdit(obj);
                                break;
                        }
                    });
                });
            });
        },
        methods: {
            handleChange:function(value, direction, movedKeys) {//改变assigned
                switch (direction){
                    case "right"://分配
                        this.$message_.postTips(this,'分配','qx-permission/assign?id='+allId,{items: movedKeys});
                        break;
                    case "left"://反分配
                        this.$message_.postTips(this,'分配','qx-permission/remove?id='+allId,{items: movedKeys});
                        break;
                }
            },
            alertEdit: function (obj=null) {
                if (obj!==null){
                    this.datas = obj.data;
                }
                allIndex = this.$message_.layOpen("#edit",() => {
                    switch (allType){
                        case "edit":
                            obj.update(obj.data)
                            break;
                    }
                });
            },
            alertAssign: function (data=null) {
                allIndex = this.$message_.layOpen("#assigned");
            },
            submitForm:function(datas) {
                this.$refs[datas].validate((valid) => {
                    if (valid) {
                        switch (allType){
                            case "add":
                                this.$message_.postTips(this,'新增','qx-permission/create',{AuthItem:this.datas});
                                break;
                            case "edit":
                                this.$message_.postTips(this,'修改','qx-permission/update?id='+allId,{AuthItem:this.datas});
                                break;
                        }
                        return false;
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>